/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view>
		<view class="container">
			<view class="notice-pg">
				<block v-for="(item,index) in datalist" :key='index'>
					<view class="notice-list" v-if="item">
						<navigator class="notice-item" @tap.stop="clickMenu" data-type="login" :data-url="item.url" role="navigation">
							<view class="notice-title">
								<image class="notice-icon" v-if="item.type==0" :src="imgUrl+'user/mesg-notes.png'" role="img"></image>
								<image class="notice-icon" v-if="item.type==1" :src="imgUrl+'user/mesg-activi.png'" role="img"></image>
								<image class="notice-icon" v-if="item.type==2" :src="imgUrl+'user/mesg-logistics.png'" role="img"></image>
								<text class="notice-icon-num" v-if="item.count>0">
									{{item.count>9?'9+':item.count}}
								</text>
							</view>
							<view class="notice-cont-wrap">
								<view class="notice-cont-top">
									<text class="notice-cont-dev" v-if="item.type==0">通知</text>
									<text class="notice-cont-dev" v-if="item.type==1">活动</text>
									<text class="notice-cont-dev" v-if="item.type==2">物流</text>
									<text class="notice-cont-time" v-if="item.count>0">
										{{item.time}}
									</text>
								</view>
								<view class="notice-cont-bottom">
									<text class="notice-cont-name">
										{{item.count>0?item.msg:'暂无消息'}}
									</text>
								</view>
							</view>
						</navigator>
					</view>
				</block>
				
				
			</view>
			
		</view>
		
	</view>
</template>

<script>
	
	import {getMessage} from "@/api/api.js";
	import common from '@/common/common.js';
	import {mapState} from "vuex";
	import config from "@/api/config";
	export default {
		data() {
			return {
				loginInfo:"",
				datalist:[],
				imgUrl:config.imgUrl,
				
			};
		},
		computed: {
			...mapState(['hasLogin'])
		},
		onShow(){
			
			// this.params.prom_type=6;
			if(this.hasLogin){
				this.datalist.length=3;
				this.notice()
				this.active()
				this.logistics()
				
				
			}else{
			
				common.toast("none","请登录",2000)
				
			}
			
		},
		
		methods:{
			
			/*通知*/ 
			notice(){
				let newData={
					category:0
				}
				getMessage(newData).then(res=>{
					console.log(res)
					if(res.count>0){	
						let timer=common.format(res.time,"yyyy-MM-dd hh:mm:ss")
						res.time=timer
					}
					res.type=0;
					res.url="/pages/user/message_release/message_release"
					
					this.datalist.splice(0,1,res)
					
					
					
				})
			},
			/*活动*/ 
			active(){
				let newData={
					category:1
				}
				getMessage(newData).then(res=>{
					console.log(res)
					if(res.count>0){
						let timer=common.format(res.time,"yyyy-MM-dd hh:mm:ss")
						res.time=timer
					}
					res.type=1;
					res.url="/pages/user/active_mesg/active_mesg"
					
					this.datalist.splice(1,1,res)
					
					
					
				})
			},
			/*物流*/
			 logistics(){
				 let newData={
				 	category:2
				 }
				 getMessage(newData).then(res=>{
				 	console.log(res)
					if(res.count>0){
						let timer=common.format(res.time,"yyyy-MM-dd hh:mm:ss")
						res.time=timer
					}
					res.type=2;
					res.url="/pages/user/message_logistics/message_logistics"
				 	
					this.datalist.splice(2,1,res)
					
				 })
			 },
			 clickMenu(e){//跳转方法
			 	console.log(e)
			 	let url=e.currentTarget.dataset.url;
			 	let login=e.currentTarget.dataset.type;
			 	if(login){
			 		
			 		// this.params.prom_type=6;
			 		if(this.hasLogin){
			 			uni.navigateTo({
			 				url:url
			 			})
			 		}else{
			 			common.islogin()
			 			
			 		}
			 		
			 	}else{
			 		uni.navigateTo({
			 			url:url
			 		})
			 	}
			 	
			 },
			
		}
	}
</script>

<style lang="scss">
	.notice-pg {
		display: block;
		width: 100%;
		min-height: 1210rpx;
	}

	.notice-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
		height: 130rpx;
		border-bottom: 1px solid #f3f3f3;
		background-color: #fff;
		width: 670rpx;
		margin: 20rpx 20rpx 0;
		border-radius: 10rpx;

	}

	.notice-title {
		display: flex;
		width: 82rpx;
		height: 82rpx;
		position: relative;
	}

	.notice-icon {
		width: 82rpx;
		height: 82rpx;
	}

	.notice-icon-num {
		width: 35rpx;
		height: 35rpx;
		line-height: 35rpx;
		border-radius: 50rpx;
		position: absolute;
		right: -10rpx;
		text-align: center;
		color: #fff;
		font-size: 24rpx;
		top: -10rpx;
		background-color: #e91b1b;
	}

	.notice-cont-wrap {
		width: 575rpx;
		height: 82rpx;
		margin-left: 25rpx;
	}

	.notice-cont-top {
		overflow: hidden;
	}

	.notice-cont-dev {
		font-size: 28rpx;
		text-align: left;
		width: 50%;
		font-weight: 600;
		color: #333;
		float: left;
	}

	.notice-cont-time {
		width: 50%;
		color: #999999;
		font-size: 22rpx;
		line-height: 28rpx;
		text-align: right;
		float: right
	}

	.notice-cont-name {
		display: block;
		width: 575rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: #999;
	}

	.notice-cont-bottom {
		color: #999999;
		text-align: left;
		font-size: 24rpx;
		margin-top: 15rpx;
	}

	.height-20 {
		height: 20rpx;
		background-color: #efefef;
	}
</style>
